import { useState } from "react" 
import { Segmented } from "antd"
import { Material } from "../Material"
import { Outline } from "../Outline"
import { Source } from "../Source"

export function MaterialWrapper(){
    const [tab, setTab] = useState("物料")

    return (
        <>
            <Segmented value={tab} onChange={setTab} options={["物料", "大纲", "源码"]} block />
            {/*  高度就是 100 的视口高度减去 header、tab 还有 padding 之后剩下的。 */}
            <div className="h-[calc(100vh-60px-30px-20px)]">
                {
                    tab === "物料" && <Material />
                }
                {
                    tab === "大纲" && <Outline />
                }
                {
                    tab === "源码" && <Source />
                }
            </div>
        </>
    )
}